<template>
	<view class="globe_back">
		<z-paging ref="paging" v-model="list" >
			<view slot="top">
				<view class="box1 flex">
					<u-icon @click="goBack" class="leftIcon" name="arrow-left" size="16"></u-icon>
					<view style="width: 24rpx"></view>
					<u-search class="search" placeholder="请输入搜索关键词" v-model="keyword" bgColor="#ffffff"
						:showAction="false" shape="square" @search="search"></u-search>
				</view>
			</view>
			<!-- <u-tabs :list="list1" @click="click" :current="current" style="width: 50%;"></u-tabs> -->
			<view class="box">
				<!-- 商品列表 -->

				<view class="listBox flex flex_wrap" >
					<view class="list" v-for="(item,index) in list">
						<!-- <lz-goods-card-item :item="item" @click="buy" /> -->
						<view @click.stop="buys(item.id)">
						    <image class="comimng" :src="item.gallery_images" mode="widthFix"></image>
						    <view class="title">{{ item.name }}</view>
						    <!--   -->
						    <view class="money">
						        ￥
						        <text class="moneyN">{{ item.retail_price}}</text>
						        <!-- text class="cost" v-if="t==2">￥{{ item.specification[0].ch[0].money }}</text>
								<text class="costs" v-if="t==1">月销{{ item.sales||0 }}</text> -->
						    </view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		goodsList
	} from '@/api';
	export default {
		data() {
			return {
				keyword: '',
				list: [],
				page:1,
				pagesize:10,
				store_id:0,
				status:'nomore',
				current:0,
				list1: [
				{
					name: '租车',
				}, {
					name: '电池',
				}
				],
				type:0,
			};
		},
		onShow() {},
		onLoad(e) {
			if(e.type){
				this.type=e.type
			}
			this.store_id=e.store_id
			this.lists(1)
		},
		onReachBottom() {
		
		  if (this.page * this.pagesize > this.list.length) return;
		  this.status = "loading";
		  this.page = ++this.page;
		  setTimeout(() => {
		    this.lists(2,1);
		    if (this.page * this.pagesize > this.list.length)
		      this.status = "nomore";
		    else this.status = "loading";
		  }, 1000);
		},
		methods: {
          click(item) {
			  // console.log(item)
			  // this.current=item.index
			  // if(item.index==0){
				 //    this.lists(1)
			  // }else{
				  this.getGoodsList()
			  // }
              
            },
			lists(e,i){
				
			 let data={
					 join_merchant_id:this.store_id,
					 page:this.page,
					 pagesize:this.pagesize,
			    }
				if(i==2){
					data.search=this.keyword
				}
				this.$.ajax(1,"POST","index/list_of_rental_batteriess",data,(res)=>{
				  if(res.code==200){
						if(e==1){
							 this.list = res.data
						}else{
							 this.list = [...this.list, ...res.data];
						}
				  }else{
				     this.$u.toast(res.msg);
				  }
				})
			},
			// getGoodsList() {
			// 	this.$.ajax(1,"POST","index/list_of_rental_batteriess",{
			// 	  // cid:id,
			// 	  // is_hot:0,
			// 	  t:2	
			// 	},(res)=>{
			// 	  if(res.code==200){
			// 		    this.list=res.data
			// 		   console.log(res)
			// 	  }else{
			// 	     this.$.ti_shi(res.msg);
			// 	  }
			// 	})
			// },
			search(){
				this.page=1;
				this.lists(1,2)
			},
			buys(id) {
				
				 uni.navigateTo({
					  url:'/pages/index/ProductDetaild?id='+id+'&type='+this.type
				 })
			},
			buy(id) {
				uni.navigateTo({
					url: '/pages/index/OnlineCar?id='+id
				});
			},
			goBack() {
				uni.navigateBack();
			},
			
		}
	};
</script>

<style scoped lang="scss">
	.comimng {
	    width: 100%;
	}
	.title {
	    margin: 16rpx;
	    color: #00091a;
	    font-size: 32rpx;
	}
	.tip {
	    font-size: 20rpx;
	    color: #3377ff;
	    padding: 8rpx;
	    border-radius: 8rpx;
	    margin-right: 16rpx;
	    background: #f7faff;
	}
	.money {
	    margin-top: 8rpx;
	    color: #ff6401;
	    font-size: 20rpx;
	    .moneyN {
	        font-size: 32rpx;
	        font-weight: bold;
	    }
	    .cost {
	        font-size: 24rpx;
	        color: #ccced1;
	        text-decoration: line-through;
	        margin-left: 8rpx;
	    }
	}
	.box1 {
		padding: 100rpx 32rpx 0rpx;
		width: 65%;

		.search {
			border-radius: 8rpx;
		}
	}

	.box {
		padding: 0 32rpx 32rpx;

		.listBox {
			margin-top: 30rpx;
		}

		.list {
			width: 45%;
			margin: 1%;
			padding: 1.5%;
			background: white;
			border-radius: 16rpx;

			.comimng {
				width: 100%;
			}

			.title {
				margin: 16rpx;
				color: #00091a;
				font-size: 32rpx;
			}

			.tip {
				font-size: 20rpx;
				color: #3377ff;
				padding: 8rpx;
				border-radius: 8rpx;
				margin-right: 16rpx;
				background: #f7faff;
			}

			.money {
				margin-top: 8rpx;
				color: #ff6401;
				font-size: 20rpx;

				.moneyN {
					font-size: 32rpx;
					font-weight: bold;
				}

				.cost {
					// border: solid;
					font-size: 24rpx;
					color: #ccced1;
					text-decoration: line-through;
					margin-left: 8rpx;
				}
			}
		}
	}
</style>